<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/partList'">
            <div class="vs-table-box">
                <div class="operation-box clear-float" style="display: flex;justify-content: flex-end;">
                <div class="title-left"> 针对部位列表 </div>
                <el-button icon="el-icon-plus" @click="addFun" style="margin-left:auto;" type="primary">新增</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column prop="title" label="分类名称"> </el-table-column>
                    <el-table-column prop="create_time" label="创建时间"> </el-table-column>
                    <el-table-column fixed="right"  label="操作">
                        <template slot-scope="scope">
                            <div class="vs-no-lihe">
                                <span @click="setRow(1,scope.row)" class="tab-table-text">编辑</span>
                                <span @click="setRow(2,scope.row)" class="tab-red-text">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        
        <!-- 新增编辑积分 分类 -->
         <el-dialog :title="ruleForm.id?'修改':'新增'+'部位'" :visible.sync="isInfo"  width="700px" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="部位名称：" prop="title">
                    <el-input v-model="ruleForm.title" style="width: 370px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isInfo = false;handleClose()">取 消</el-button>
                <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import oneReply from "../../components/oneReply.vue";
export default {
    components: {
        oneReply
    },
    data() {
        return {
            ruleForm: {
                id: '',
                title: ''
            },
            rules: {
                title: [ { required: true, message: '请输入分类名称', trigger: 'blur' }, ],
                min: [ { required: true, message: '请输入最小积分', trigger: 'blur' }, ],
                max: [ { required: true, message: '请输入最大积分', trigger: 'blur' }, ],
            },
            oneReplyShow: false,
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            replyId:'',
            paging: {
                title: '',//姓名
                start_time: '',//开始时间
                end_time: '',//结束时间
                comment_id:'',
                page: 1,
                total: 0,
                limit: 10,
            },

            form: {
                date: "",
            },
            tableData: []
        };
    },
    created() {
        if (this.$route.path == '/partList') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        addFun() {
            this.ruleForm.title = ''
            this.ruleForm.id = ""
            this.isInfo = true
        },
        setAd() {
            this.$refs.ruleForm.validate(async (valid)=>{
                if(!valid)return;
                
                if (this.ruleForm.title == '') return this.$message.error('请输入部位名称');
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                let {code,data} = await this.$Http.setProjectPart(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success(obj.id?'修改成功':'添加成功');
                    this.isInfo = false
                    this.handleCurrentChange(1);
                }
            })
        },
        async setRow(type, row) {
            if (type == 2) {
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该部位吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            let {code,data} = await this.$Http.delProjectPart({
                                id:row.id,
                            });
                            if(code){
                                this.$message.success('删除成功!')
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                })
            } else {
                this.ruleForm = JSON.parse(JSON.stringify(row))
                this.isInfo = true
            }
        },
        handleClose(dom) {
            console.log(3434)
            this.ruleForm.title = ''
            this.ruleForm.id = ""
            this.$refs['ruleForm'].resetFields();
            this.isInfo = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let obj = {...this.paging};
            let { code, data } = await this.$Http.getProjectPart(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>